<template>
  <div class="notedetail">
    <van-nav-bar fixed>
      <template #left>
        <i
          class="iconfont icon-fanhui"
          style="font-size: 20px; font-weight: 600"
          @click="$router.back()"
        ></i>
      </template>
      <template #title>
        <span style="font-size: 20px; font-weight: 600">手记精选</span>
      </template>
      <template #right>
        <i
          class="iconfont icon-pinglun"
          style="font-size: 26px; font-weight: 600"
        ></i>
      </template>
    </van-nav-bar>
    <div class="user" v-if="dataList.user">
      <img :src="dataList.user.avatar | picUrl" alt="" />
      <div class="userinfo">
        <span class="username">{{ dataList.user.username }}</span>
        <span class="time">发布于 {{ dataList.addtime | publishtime }}</span>
      </div>
      <div @click.stop="attention" class="guanzhu" v-if="attentionList.indexOf(this.dataList.user.id)==-1">
        <span> + 关注 </span>
      </div>
      <div @click.stop="attention" class="guanzhu guanzhued" v-else>
        <span> <i style="font-size:14px" class="iconfont icon-dui"></i> 已关注 </span>
      </div>
    </div>
    <div v-if="dataList.images">
      <div class="swipe" ref="swipe">
        <van-swipe
          class="myswipe"
          indicator-color="#da4f34"
          @change="onchange"
          :height="itemHeight"
        >
          <van-swipe-item
            class="swipeItem"
            v-for="(i, index) in dataList.images"
            :key="index"
          >
            <img :src="i" alt="" @load="loadimg" />
          </van-swipe-item>
        </van-swipe>
        <MyLoading v-show="!isShow"></MyLoading>
      </div>
      <div class="titlebox">
        <span class="title">{{ dataList.title }}</span>
        <span class="content">{{ dataList.content }}</span>
      </div>
      <ComMent :comment="comment"></ComMent>
    </div>
  </div>
</template>

<script>
import ComMent from "@/components/ComMent.vue";
import MyLoading from "@/components/MyLoading.vue";
import Vue from "vue";
import { NavBar } from "vant";
import { Swipe, SwipeItem } from "vant";
import {mapState} from "vuex";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NavBar);
export default {
  data() {
    return {
      dataList: {},
      itemHeight: null,
      comment: [],
      isShow:false
    };
  },
  components: {
    ComMent,
    MyLoading,
  },
  created() {
    let id = this.$route.query.id;
    this.axios.get("https://apis.netstart.cn/xpc/note/" + id).then((res) => {
      this.dataList = res.data.data;
    });
    this.axios
      .get("https://apis.netstart.cn/xpc/note/" + id + "/comment")
      .then((res) => {
        this.comment = res.data.data;
      });
  },
  watch: {
    dataList: function () {
      this.$nextTick(() => {
        this.itemHeight =
          this.$refs.swipe.querySelectorAll("img")[0].offsetHeight + 22;
      });
    },
  },
  methods: {
    attention(){
      console.log(this.dataList.user.id);
      this.$store.commit('addAttention',{id:this.dataList.user.id})
    },
    onchange(index) {
      this.itemHeight =
        this.$refs.swipe.querySelectorAll("img")[index].offsetHeight + 22;
    },
    loadimg() {
      this.itemHeight =
        this.$refs.swipe.querySelectorAll("img")[0].offsetHeight + 22;
        this.isShow=true
    },
  },
  computed:{
    ...mapState(["attentionList"])
  }
};
</script>

<style lang="less" scoped>
.notedetail {
  width: 100vw;
  height: 100%;
  background-color: #f7f7f7;
  padding-top: 47px;
  .user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px;
    background-color: #fff;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 5px;
    }
    .userinfo {
      flex: 1;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      .username {
        font-size: 14px;
        color: #888;
      }
      .time {
        font-size: 12px;
        color: #aaa;
      }
    }
    .guanzhu {
      border-radius: 30px;
      padding: 4px 10px;
      border: 2px solid #d58779;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      color: #d58779;
      font-weight: 600;
      &.guanzhued{
        border: 2px solid #888;
        color: #888;
      }
    }
  }
  .swipe {
    width: 100vw;
    img {
      width: 100%;
      height: auto;
    }
    .myswipe {
      background-color: #fff;
      position: relative;
    }
  }
  .titlebox {
    display: flex;
    flex-direction: column;
    padding: 20px 10px;
    justify-content: center;
    background-color: #fff;
    .title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .content {
      font-size: 13px;
      color: #888;
    }
  }
}
</style>